<template>
  <div>
    <div style="height: 30px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/libraryManage' }">题库管理</el-breadcrumb-item>
        <el-breadcrumb-item>查看题库</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div style="margin-top: 8px">
      <el-table
        :data="questions"
        style="width: 100%">
        <el-table-column
          label="题目序号"
          width="120">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.qid}}</span>
          </template>

        </el-table-column>
        <el-table-column
          label="题目内容"
          width="750">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.details }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="题目类型"
          width="120">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.type }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="题目难度"
          width="120">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.difficulty }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="题目来源"
          width="120">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.source }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="题目分数"
          width="120">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.score }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button size="mini" @click="look(scope.row.qid)">
              查看
            </el-button>
            <el-popconfirm @confirm="deleteq(scope.row.qid)" title="确定删除吗？">
              <el-button size="mini" type="danger" style="margin-left: 10px" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog
        title="题目详情"
        :visible.sync="dialogVisible"
        width="30%">

        <div>
          题目详情：
          <span>{{question.details}}</span><br>
          选项:<br>
          <span>{{'A: '+question.option.ad}}</span><br>
          <span>{{'B: '+question.option.bd}}</span><br>
          <span>{{'C: '+question.option.cd}}</span><br>
          <span>{{'D: '+question.option.dd}}</span><br>
          <span>{{'E: '+question.option.ed}}</span><br>
          <span>{{'F: '+question.option.fd}}</span><br>
          <span>{{'G: '+question.option.gd}}</span><br>
          答案
          <span>{{question.answer}}</span>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  export default{
    name:"questionManage",
    data(){
      return{
        questions:[
          {
            answer: '',
            details: '',
            difficulty: '',
            lid: '',
            op: '',
            option: '',
            qid: '',
            score: '',
            source: '',
            type: '',
          },
        ],
        library:{
          id:'',
          name:'',
          describe:''
        },
        question:{
          answer: '',
          details: '',
          difficulty: '',
          lid: '',
          op: '',
          option: {
            ad:'',
            bd:'',
            cd:'',
            dd:'',
            ed:'',
            fd:'',
            gd:''
          },
          qid: '',
          score: '',
          source: '',
          type: '',
        },
        dialogVisible:false,
      }
    },
    mounted() {
      this.library.id=this.$route.query.id;
      this.getQuestionList();
    },
    methods:{
      async getQuestionList(){
         let res =await this.$API.findQuestionList(this.library.id);
         this.questions = res.data;
         let i=0;
         for(let question of this.questions){
           if(question.type == 1 || question.type == '1'){
             this.questions[i].type = '选择题';
             i++;
           }
           if(question.type == 2 || question.type == '2'){
             this.questions[i].type = '多选题';
             i++;
           }
           if(question.type == 3 || question.type == '3'){
             this.questions[i].type = '判断题';
             i++;
           }
           if(question.type == 4 || question.type == '4'){
             this.questions[i].type = '填空题';
             i++;
           }
           if(question.type == 5 || question.type == '5'){
             this.questions[i].type = '问答题';
             i++;
           }
         }
          let j = 0
          for(let question1 of this.questions){
          if(question1.difficulty == 1 || question1.difficulty == '1'){
            this.questions[j].difficulty = '简单';
            j++;
          }
          if(question1.difficulty == 2 || question1.difficulty == '2'){
            this.questions[j].difficulty = '中等';
            j++;
          }
          if(question1.difficulty == 3 || question1.difficulty == '3'){
            this.questions[j].difficulty = '困难';
            j++;
            }
          }
          let k = 0;
          for(let question2 of this.questions){
          if(question2.source == 1 || question2.source == '1'){
            this.questions[k].source = '原创';
            k++;
            }
            if(question2.source == 2 || question2.source == '2'){
            this.questions[k].source = '第三方';
            k++;
            }
         }
         console.log(this.questions);
      },
      async deleteq(qid){
        let res = await this.$API.deleteQuestion(qid);
        if(res.code == 0 || res.code== '0'){
          this.$message({
            message: '删除成功',
            type: 'success'
          });
        }else {
          this.$message.error('删除失败');
        }
        this.getQuestionList();
      },
      async look(qid){
        let res = await this.$API.findQuestionDetails(qid);
        this.question = res.data;
        this.dialogVisible = true;
        console.log(res);
      }
    }
  }
</script>
<style scoped>
</style>